<template>
  <div id="container">
<!--    轮播图-->

<!--    <Slideshow/>-->
<!--    <hr style="margin-top: 80px"/>-->
    <hr style="margin-bottom: 80px; margin-top: 0"/>
    <div class="picker">
      <el-date-picker
          :clearable="picker.clearable"
          v-model="room.time"
          type="daterange"
          key="pabulishDate"
          @change="roomTimeChange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
      </el-date-picker>
    </div>
    <div class="rooms">
      <div class="room" v-for="item in room.entity" :key="item.roomCode">
        <img :src="item.roomImagesPath">
        <div class="room-info">
          <span class="head">
            <span class="room-type">{{ item.roomType }}</span>
            <span class="spare">剩余{{ item.roomSpareNum }}</span>
          </span>
          <div class="body">
            <div :style="!item.roomFacWifi ? 'text-decoration: line-through; color: darkgrey' : ''">wifi</div>
            <div :style="!item.roomFacBre ? 'text-decoration: line-through; color: darkgrey' : ''">早餐</div>
            <div>{{ item.roomFacOcc }}人</div>
            <div>{{ item.roomFacFloor }}楼</div>
            <div>{{ item.roomFacSpa }}m&sup2;</div>
            <div>{{ item.roomFacBed }}m</div>
          </div>
          <div class="warning">一旦预定,不可退款. 盗梦之家周边餐饮、娱乐齐全，步行即可到达虹顺广场、良华购物广场等诸多娱乐、购物、休闲于一体的大型综合商业mall. 带给您“自然、静谧、温暖、朴实”的健康生活方式</div>
          <div class="foot">
            <div class="comment" @click="comment(item)">评论</div>
            <div class="price">{{ item.roomExp.toLocaleString('zh-CN', {style: 'currency', currency: 'CNY'}) }}</div>
            <div class="reverse" @click="reserve(item)">预定</div>
          </div>
          <el-dialog :width="commentDialog.width" :title="commentDialog.title" :visible.sync="commentDialog.visible" :destroy-on-close="true">
            <el-form :model="commentDialog.entity" status-ico :label-width="commentDialog.item.label_width" class="demo-ruleForm">
              <ul class="comment-ul" style="overflow:auto">
                <li v-for="item in commentDialog.comment.entity" :key="item.id">
                  <div class="acc-name" :title="item.accName">{{ item.accName }}</div>
                  <div class="acc-comment">{{ item.comment }}</div>
                </li>
                <div v-if="commentDialog.comment.entity.length === 0">暂无评论</div>
              </ul>
            </el-form>
          </el-dialog>

          <el-dialog :width="dialog.width" :title="dialog.entity.roomType" :visible.sync="dialog.visible" :destroy-on-close="true">
            <el-date-picker
                :clearable="picker.clearable"
                v-model="room.time"
                type="daterange"
                key="pabulishDate"
                disabled
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-form :model="dialog.entity" status-icon ref="form" :role="dialog.role" :label-width="dialog.item.label_width" class="demo-ruleForm">
              <el-input placeholder="请输入联系号码" v-model="dialog.entity.informPhone">
                <template slot="prepend">联系号码</template>
              </el-input>
              <el-input placeholder="请输入姓名" v-model="dialog.entity.checkinName">
                <template slot="prepend">姓名</template>
              </el-input>
              <el-input clearable placeholder="请输入身份证号" v-model="dialog.entity.checkinIdentity">
                <template slot="prepend">身份证号</template>
              </el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialog.visible = false">取 消</el-button>
              <el-button type="primary" @click="generate()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {RoomList, GenerateOrder, PurchaseOrder, CommentListByRoomCode} from "@/api";
import RoomHead from "@/components/RoomHead.vue";
import Slideshow from "@/components/Slideshow.vue";
import {Notification, MessageBox} from "element-ui";

export default {
  name: "Room",
  components: {
    Slideshow,
    RoomHead,
  },
  data(){
    return{
      dialog: {
        title: '订单',
        width: '32%',
        item: {
          label_width: "80px"
        },
        visible: false,
        entity: {
          informPhone: '',
          checkinName: '',
          checkinIdentity: '',
          checkinStartTime: '',
          checkinEndTime: '',
          roomType: ''
        },
      },
      commentDialog: {
        comment: {
          entity: [],
        },
        title: '评论区',
        width: '32%',
        item: {
          label_width: "80px"
        },
        visible: false,
        picker: {
          clearable: false,
          time: []
        }
      },
      picker: {
        clearable: false
      },
      msg: 'HOME',
      slideshow: {
        images: []
      },
      room: {
        time: [],
        entity: {}
      }
    }
  },
  methods: {
    generate(){
      const roomType = this.dialog.entity.roomType
      const checkinStartTime = this.dialog.entity.checkinStartTime
      const checkinEndTime = this.dialog.entity.checkinEndTime
      const checkinName = this.dialog.entity.checkinName
      const informPhone = this.dialog.entity.informPhone
      const checkinIdentity = this.dialog.entity.checkinIdentity
      if (checkinName === '' || informPhone === '' || checkinIdentity === ''){
        Notification.error({
          title: '请将信息填写完整'
        })
        return
      }
      GenerateOrder({
        roomType,
        checkinStartTime,
        checkinEndTime,
        checkinName,
        informPhone,
        checkinIdentity
      }).then(res => {
        // 获取房间信息
        RoomList({
          checkinStartTime: this.room.time[0],
          checkinEndTime: this.room.time[1]
        }).then(res => {
          this.room.entity = res.data;
          console.log(this.room )
        })
        MessageBox.confirm('支付' + res.data.orderReversePrice, '支付', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          PurchaseOrder(res.data.orderCode).then(res => {
            this.$message({
              type: 'success',
              message: '支付成功!'
            });
            this.dialog.visible = false
            return
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消支付'
          });
        });
        console.log(res)
      })
    },
    comment(item){
      console.log(item)
      CommentListByRoomCode(item.roomType).then(res => {
        console.log(res)
        this.commentDialog.comment.entity = res.data
        this.commentDialog.visible = true
      })
    },
    reserve(room_info){
      this.dialog.entity.roomType = room_info.roomType
      this.dialog.entity.checkinStartTime = this.room.time[0]
      this.dialog.entity.checkinEndTime = this.room.time[1]
      this.dialog.visible = true

      console.log(room_info)
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const seperator1 = "-";
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      return year + seperator1 + month + seperator1 + strDate;
    },
    roomTimeChange(val){
      let roomTime = val
      // 获取房间信息
      RoomList({
        checkinStartTime: roomTime[0],
        checkinEndTime: roomTime[1]
      }).then(res => {
        this.room.entity = res.data;
        console.log(this.room )
      })
    }
  },
  mounted() {
    // 设置搜索房间的默认时间
    let now = new Date();
    let startTime = this.formatDate(now.toLocaleString())
    now.setDate(now.getDate() + 1)
    let endTime = this.formatDate(now.toLocaleString())
    this.room.time = [startTime, endTime]
    // 获取房间信息
    RoomList({
      checkinStartTime: this.room.time[0],
      checkinEndTime: this.room.time[1]
    }).then(res => {
      this.room.entity = res.data;
      console.log(this.room )
    })
  }
}
</script>

<style scoped lang="less">
#container{

  .rooms{
    display: flex;
    //flex-direction: row;
    //flex-wrap: wrap-reverse;
    flex-flow: row wrap-reverse;
    justify-content: center;
    .room:hover{
      box-shadow: 0 0 5px 4px darkgrey;
    }
    .room{
      margin: 16px 32px;
      background: white;
      width: 720px;
      min-width: 600px;
      border: 0;
      border-radius: 38px;
      display: flex;
      flex-flow: row nowrap;
      .room-info{
        display: flex;
        margin: 16px;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;


        .comment-ul{
          height: 300px;
          margin: 0;
          padding: 0;
          li{
            list-style: none;
            display: flex;
            flex-direction: column;
            margin-bottom: 16px;
            .acc-name{
              max-width: 80px;
              text-align: left;
              /*强制文字在一行文本框内*/
              white-space: nowrap;
              /*溢出部分文字隐藏*/
              overflow: hidden;
              /*溢出部分省略号处理*/
              text-overflow: ellipsis;
              font-size: 16px;
            }
            .acc-comment{
              text-align: left;
              font-size: 20px;
              margin: 4px 16px;
              background: darkgrey;
              padding: 4px;
              border: 1px solid darkgrey;
              border-radius: 4px;
              box-shadow: 0 0 5px 4px darkgrey;
            }
          }
        }

        /deep/ .el-dialog{
          min-width: 480px;
          .el-dialog__header{
            .el-dialog__title{
              color: darkred;
              font-weight: 600;
            }
          }
          .el-dialog__body{
            padding-right: 68px;
            padding-left: 68px;
            .el-input{
              margin-top: 16px;
            }
          }
        }
        .head{
          display: flex;
          justify-content: space-between;
          .room-type{
            color: darkred;
            font-size: 24px;
            font-weight: bolder;
            display: flex;
          }
          .spare{
            margin-right: 80px;
          }
        }
        .body{
          font-size: 20px;
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          div{
            margin: 8px 8px;
          }
        }
        .warning{
          display: flex;
          font-size: 12px;
          color: darkgrey;
          align-content: flex-end;
          padding-right: 80px;
        }
        .foot{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin: 0 0 8px 0;
          .comment{
            cursor: pointer;
            margin: 0 32px;
          }
          .price{
            color: red;
            font-size: 24px;
            align-items: flex-end;
            margin: 0 32px;
          }
          .reverse:hover{
            background: #f56c6c;
            color: white;
          }
          .reverse:active{
            background: #f34f52;
            color: white;
          }
          .reverse{
            margin: 0 32px;
            background: #fef0f0;
            cursor: pointer;
            padding: 8px 16px;
            color: red;
            border-radius: 4px;
            border: 1px solid red;
          }
        }
      }
      img{
        border-radius: 16%;
        width: 240px;
      }
    }
  }
}
.picker{
  /deep/.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
    min-width: 600px;
  }
}


</style>